<template>
    <!--不再需要用一个根元素包裹其它元素-->
    <h1>{{ msg }}——关中刀客在青岛</h1>
    <p>累加：{{state.count}}</p>
    <p>双倍：{{double}}</p>
    <p>ref的+10：{{number}}</p>
    <button @click="add">试一下</button>
    <Teleport to="#footer">
        <div>脚</div>
    </Teleport>
    <Suspense>

    </Suspense>
</template>

<script>
    // 手动import的写法更利于Tree-shaking
    import {reactive, computed, ref} from 'vue'

    export default {
        name: 'HelloWorld',
        props: {
            msg: String
        },
        setup() { // setup，组件入口，相当于创建前+创建后的生命周期
            const {state, double} = userCounter(0)
            const number = ref(1) // 用ref可以把一个值包装成响应式
            const add = () => {
                state.count++
                number.value += 10 // ref包装出来的值可以通过.value的属性来修改
            }
            return {state, add, double, number}
        },
    }

    // 将用户功能提取出来，以方便写成功能集中的代码块，而不是按vue2中方法、属性等组织的那样，改一个功能需要改好几个地方
    const userCounter = (count) => {
        const state = reactive({// 用reactive可以把一个对象包装成响应式
            count,
        })
        const double = computed(() => state.count * 2)

        return {state, double}
    }
</script>
